<template>
	<om-page :title="title">
		<view class="om_hd_fix" style="-webkit-box-shadow: 0px 1px 10px #b3b2b2;">
			<om-sub :title="getTitle" >
				<view slot="extra"><button type="primary" size="mini" @click="finish">完成</button></view>
			</om-sub>
		</view>
		<view class="page__bd" style="padding-top: 100rpx;"></view>
		<uni-list>
			<uni-list-item :showArrow="false" :showHover="false" :showClear="remark" @iconClear="clearFunc">
				<textarea
					:maxlength="max" 
					auto-height 
					style="min-height: 30px;"
					class="margin-xl" 
					v-model="remark" 
					:focus="focus"
					:placeholder="getPrompt"/>
			</uni-list-item>
		</uni-list>
		<view class="flex justify-end padding-right-sm"><label>{{getMax}}</label></view>
		<view>
			<uni-list v-if="commonData.datas" :title="selectTitle">
				<view v-for="(item, index) in commonData.datas" :key="index">
					<uni-list-item
						showArrow
						:title="getName(item)"
						:avatar="index + 1"
						@click="itemtap(item)"
						:note="getNote(item)"
						:extraText="getExtra(item)"
					></uni-list-item>
				</view>
			</uni-list>
		  </view>
		  <tui-loadmore :visible="commonData.loadding"></tui-loadmore>
		  <tui-nomore :visible="!commonData.pullUpOn"></tui-nomore>
		  <tui-scroll-top :scrollTop="scrollTop" style="background: rgba(124, 174, 255, 0.5)"></tui-scroll-top>
	</om-page>
</template>

<script>
	import listLoad from '../../../static/js/listLoad.js';
	import {
		hasValue
	} from '@/static/js/formUtil.js';
	export default {
		data() {
			return {
				title:"",
				parentfieldname:"",//父字段名称
				fieldname:"",//字段名称
				remark:"",
				max:-1,
				isref:false,
				focus:false,
				
				scrollTop: 0,
				searchStr:"",
				commonData: {
					datas:[]
				},
				pageTitle:"搜索",
				method:'get',//url对应的服务器方法的请求类型
				cachename:'',//缓存名称（必有）
				url:'',//服务器路径（必有）
				namefield: "dicname",//返回数据中的用于显示的字段名，标题
				namesplit:"|",//间隔符
				notefield: "",//返回数据中的用于显示的字段名，列副标题
				notesplit:"|",//间隔符
				extrafield: "",//返回数据中的用于显示的字段名，列右侧提示
				extrasplit:"|",//间隔符
				searchfield:"",//查询属性，后台接收字段名
				likefield:"",//返回数据中的用于比较的字段名
				other:{},//其他查询属性
				initload:false,
				pagination: false,
				initdataList:[],
				loaded:false,
				selectTitle:"备选项",
				searchByBackground:false,//备选项根据输入内容从后台返回
				prompt:''
			}
		},
		watch: {
		　　remark(newValue, oldValue) {
				this.searchStr = newValue
		　　},
			searchStr(newValue, oldValue) {
				this.confirm()
		　　},
			'commonData.datas':{
				handler(newValue, oldValue){
					if(!this.pagination && this.initdataList.length == 0 && newValue.length){
						this.initdataList = newValue
					}
				},
				deep:true
			}
		},
		created: function () {
		  this.initData = this._.debounce(this.initData, 300)
		},
		computed:{
			getTitle(){
				if(~this.max){
					return this.title
				}else {
					if(this.remark){
						return this.title + "["+this.remark.length+"]"
					}else{
						return this.title;
					}
				}
			},
			getMax(){
				if(~this.max){
					return this.remark.length + "/" + this.max
				}else{
					return ""
				}
			},
			getPrompt(){
				if(this.prompt){
					return this.prompt
				}else{
					return (this.initdataList.length == 0)?"请输入":"请输入或从下列选项中选择"
				}
			}
		},
		methods: {
			finish(){
				let _that = this
				let pages = getCurrentPages(); 
				if(pages.length > 2) {
					let prePage = pages[pages.length-2]
					if(this.isref){
						//#ifdef APP-PLUS
						prePage['$vm']['$refs']['autoform']['formdata'][_that.fieldname] = _that.remark
						//#endif
						//#ifndef APP-PLUS
						for(var iref in prePage.$refs) {
							var autoform = prePage.$refs[iref]
							if(autoform.formdata && autoform.formdata.hasOwnProperty(_that.fieldname)){
								autoform.formdata[_that.fieldname] = _that.remark
								break;
							}
						}
						//#endif
					}else{
						if(_that.parentfieldname){
							//#ifdef APP-PLUS
							prePage['$vm'][_that.parentfieldname][_that.fieldname] = _that.remark
							//#endif
							
							//#ifndef APP-PLUS
							prePage[_that.parentfieldname][_that.fieldname] = _that.remark
							//#endif
						}else{
							prePage[_that.fieldname] = _that.remark
						}
					}
					uni.setStorage({
					   key: this.cachename,
					   data: _that.remark
					})
					uni.navigateBack()
				}else{
					this.om.toast("页面异常")
				}
			},
			clearFunc(){
				this.remark = ""
				let _that = this
				_that.focus = false
				this.$nextTick(function(){
					_that.focus = true
				})
			},
			confirm(){
				if(this.searchStr || this.initload){
					this.initData()
				}else{
					this.commonData.datas= []
				}
			},
			initData(){
				let query = {}
				let _that = this
				Object.assign(query, this.other)
				if(this.searchfield){
					query[this.searchfield] = this.searchStr
				}
				if(this.pagination) {
					listLoad.initData(this,this.url,query)
				} else {
					if(this.initdataList.length && !this.searchByBackground){
						var arr = []
						if(this.likefield){
							arr = this.likefield.split("|")
						}
						if(this.namefield){
							arr = [...arr, this.namefield.split(this.namesplit)]
						}
						if(this.notefield){
							arr = [...arr, this.notefield.split(this.notesplit)]
						}
						if(this.extrafield){
							arr = [...arr, this.extrafield.split(this.extrasplit)]
						}
						var datas = _that.initdataList.filter(re=>{
							if(_that.searchStr){
								for(var i=0; i<arr.length; i++){
									if(~re[arr[i]].indexOf(_that.searchStr)){
										return true
									}
								}
								return false
							}else{
								return _that.initload
							}
						})
						_that.commonData.datas = datas
					} else {
						if(!_that.loaded){
							_that.loaded = true
							listLoad.initData(_that,_that.url,query)
						}else{
							listLoad.initData(_that,_that.url,query)
						}
					}
				}
			},
			searchClear() {
				this.commonData = {}
			 },
			itemtap: function(item) {
			    uni.setStorage({
				   key: this.cachename,
				   data: item
			    })
				//回主页面
				uni.navigateBack();
			 },
			 getName(item){
				var s = ""
				if(this.namefield){
					var arr = this.namefield.split(this.namesplit)
					if(arr.length){
						arr.forEach(e => {
							if(item[e] != null && item[e] != undefined){
								if(s){
									s += " " + this.namesplit + " " + item[e]
								} else {
									s += item[e]
								}
							}
						})
					}
				}
				return s
			 },
			 getNote(item){
				var s = ""
				if(this.notefield){
					var arr = this.notefield.split(this.notesplit)
					if(arr.length){
						arr.forEach(e => {
							if(item[e] != null && item[e] != undefined){
								if(s){
									s += " " + this.notesplit + " " + item[e]
								} else {
									s += item[e]
								}
							}
						})
					}
				}
				return s
			 },
			 getExtra(item){
				var s = ""
				if(this.extrafield){
					var arr = this.extrafield.split(this.extrasplit)
					if(arr.length){
						arr.forEach(e => {
							if(item[e] != null && item[e] != undefined){
								if(s){
									s += " " + this.extrasplit + " " + item[e]
								} else {
									s += item[e]
								}
							}
						})
					}
				}
				return s
			 }
		},
		onLoad(options) {
			this.title = options.title||"备注"
			uni.setNavigationBarTitle({
			  title: this.title
			})
			// if(!options.fieldname) {//字段名称
			// 	this.om.toast("请配置输入字段名称")
			// 	uni.navigateBack()
			// }
			this.fieldname = options.fieldname
			if(options.parentfieldname) {//缓存名称
				this.parentfieldname = options.parentfieldname
			}
			if(options.isref){//缓存名称
				this.isref = options.isref
			}
			if(options.max){
				this.max = parseInt(options.max)
			}
			if(options.remark){
				this.remark = options.remark
			}
			
			if(!options.cachename){//缓存名称
				this.om.toast('没有传递缓存名称')
			}
			this.cachename = options.cachename
			if(!options.url){//搜索路径
				this.om.toast('没有传递查询路径')
			}
			this.url = options.url
			if(options.initload){//数据是否初始加载
				this.initload = true
			}
			if(options.searchByBackground){
				this.searchByBackground = true
			}
			if(options.namefield){//列标题字段
				this.namefield = options.namefield
			}
			if(options.searchfield){//查询字段
				this.searchfield = options.searchfield
			}
			if(options.notefield){//加载对象列表的显示属性
				this.notefield = options.notefield
			}
			if(options.extrafield){//加载对象列表的显示属性
				this.extrafield = options.extrafield
			}
			if(options.method){//加载对象列表的显示属性
				this.method = options.method
			}
			if(options.other){//其他查询参数
				var json = JSON.parse(options.other);
				for(var j in json){
					if(hasValue(json[j])){
						this.other[j] = json[j];
					}
				}
			}
			if(options.namesplit){//间隔符
				this.namesplit = options.namesplit
			}
			if(options.notesplit){//间隔符
				this.notesplit = options.notesplit
			}
			if(options.extrasplit){//间隔符
				this.extrasplit = options.extrasplit
			}
			if(options.selectTitle){//备选项
				this.selectTitle = options.selectTitle
			}
			if(options.pagination){
				this.pagination = true
			}
			if(options.prompt){
				this.prompt = options.prompt
			}
			this.confirm()
			var _that = this
			this.$nextTick(function(){
				_that.focus = true
			})
		}
	}
</script>

<style>

</style>
